<template>
  <div id="body" class="fahter clearfix">
    <div id="left">
      <div id="imgBox">
        <router-link to="/index">
          <img src="../assets/timg.jpg" alt />
        </router-link>
      </div>
      <!-- 渲染分类列表 -->
      <li v-for="item in classList" :key="item.classId">
        <router-link :to="'/index/indexclass?classId='+item.classId">
          <i :class="item.icon+' fa'"></i>
          {{item.name}}
        </router-link>
      </li>
      <hr size="1px" color="#eeeeee" />
      <el-input placeholder="请输入关键字">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <hr size="1px" color="#eeeeee" />
    </div>
    <div id="center">
      <!-- 轮播图部分 -->
      <router-view></router-view>

      <!-- 热门推荐部分 -->
      <div id="hot">
        <p class="p">
          <span class="title">热门推荐</span>
        </p>
        <ul>
          <li v-for="item in hotNewsList" :key="item.newsId">
            <router-link :to="'/index/show?newsId='+item.newsId">
              <img :src="'http://localhost:63135/image/'+item.cover" alt />
              <p>{{item.title}}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <div id="tuijian">
        <p>
          <span class="title">最新发布</span>
        </p>
        <div class="news">
          <div class="textBox" v-for="item in lateNewsList" :key="item.newsId">
            <h3>
              <router-link to>
                <el-tag>{{item.name}}</el-tag>
              </router-link>
              <router-link :to="'/index/show?newsId='+item.newsId">{{item.title}}</router-link>
            </h3>
            <p class="timeInfo">
              <span>{{item.userName}}</span>发布于
              <span>{{item.date}}</span>
            </p>
            <div class="content">
              <div></div>
            </div>
            <hr size="1px" color="#eeeeee" />
          </div>
        </div>
      </div>
    </div>
    <div id="right">
      <p>
        <span class="title">最新评论</span>
      </p>
      <div class="common">
        <ul>
          <li v-for="item in newCommonList" :key="item.commonId">
            <span>{{item.userName}}</span>在
            <span>{{item.time}}</span>说:
            <p>{{item.commonb}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      classList: [],
      newCommonList: [],
      pictureList: [],
      hotNewsList: [],
      lateNewsList: []
    }
  },
  created () {
    this.getClassList()
    this.getNewCommonList()
    this.getPictureList()
    this.getHotNews()
    this.getLateNewsList()
  },
  methods: {
    async getClassList () {
      const { data: res } = await this.$http.get('api/class')
      // console.log(res)
      this.classList = res.Table
    },
    // 获取最新评论
    async getNewCommonList () {
      const { data: res } = await this.$http.get('api/newcommon')
      this.newCommonList = res.Table
      // console.log(res)
    },
    async getPictureList () {
      const { data: res } = await this.$http.get('api/picture')
      //   console.log(res)
      this.pictureList = res.Table
    },
    async getHotNews () {
      const { data: res } = await this.$http.get('api/hotnews')
      //   console.log(res)
      this.hotNewsList = res.Table
    },
    async getLateNewsList () {
      const { data: res } = await this.$http.get('api/latenews')
      console.log(res)
      this.lateNewsList = res.Table
    }
  },
  watch: {
    // 同一个页面，当从编辑页面跳到增加页面时，重新刷新页面
    $route (to, from) { // 监听路由是否变化
      // this.$route.go(0)
    }
  }
}
</script>
<style lang="less" scoped>
// 清除浮动
.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

#body {
  // height: 100%;
  background-color: #eeeeee;
}
#left {
  left: 50px;
  position: fixed;
  width: 200px;
  height: 100%;
  background-color: #ffffff;

  .el-input-group {
    margin: 20px 0;
  }
  #imgBox {
    width: 100%;
    height: 120px;

    img {
      width: 100%;
    }
  }
  li {
    padding: 12px 25px;
    list-style: none;

    i {
      margin-right: 10px;
    }
    a {
      text-decoration: none;
      color: #666666;
    }
  }
}
#center {
  width: 950px;
  height: 100%;
  // background-color: #ffffff;
  // position: absolute;
  transform: translateX(270px);
  margin-top: 20px;
  // left: 270px;
  .imgBox {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    .textBox {
      display: block;
      z-index: 10;
      position: absolute;
      background-color: #fff;
      opacity: 0.5;
      bottom: 30px;
      width: 100%;
      text-align: center;
    }
  }
  #hot {
    width: 100%;
    height: 270px;
    background-color: #fff;
    margin: 20px 0;
    // display: flex;
    position: relative;
    a {
      color: #000000;
    }
    ul {
      position: absolute;
      bottom: 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    li {
      list-style: none;
      // display: inline-block;
      height: 150px;
      width: 220px;
      //  align-items: center;

      img {
        width: 100%;
      }
    }
  }

  .title {
    font-size: 22px;
    font-weight: 700;
    // position: absolute;
    border-bottom: 5px solid #ff5e52;
    margin-left: 20px;

    // top:20px;
    // left:20px
  }

  #tuijian {
    background-color: #fff;
  }
  .news {
    // height: 150px;
    .imgBox {
      width: 25%;
      height: 90%;
      img {
        height: 100%;
      }
    }
    .textBox {
      width: 100%;
      height: 80%;
      h3 {
        padding-left: 20px;
        margin: 20px 0 0 0;
      }
      .el-tag {
        margin-right: 10px;
      }
      .timeInfo {
        font-size: 12px;
        color: #666666;
        padding-left: 20px;
      }
      .content {
        margin: 20px;
        display: flex;
        justify-content: space-between;
        color: #777777;
        font-size: 15px;
        .footer {
          font-size: 12px;
          color: #666666;
        }
      }
    }
  }
  a {
    text-decoration: none;
    color: #000000;
  }
}
#right {
  right: 50px;
  top: 0px;
  position: absolute;
  width: 230px;
  height: 71%;
  background-color: #ffffff;
  margin-top: 20px;
  li {
    margin: 20px;
    border-bottom: 1px solid #666666;
  }
}
.title {
  font-size: 22px;
  font-weight: 700;
  // position: absolute;
  border-bottom: 5px solid #ff5e52;
  margin-left: 20px;

  // top:20px;
  // left:20px
}
</style>
